<template lang="pug">
.frame_box
  .head_box
    .bg_box
      span.my-font {{ props.title }}
    .border
  .content_box
    slot
</template>

<script setup>
const props = defineProps({
  title: String
})
</script>

<style lang="scss" scoped>

/* 引入字体 */
@font-face {
  font-family: 'myfont';
  src: url('@/assets/fonts/YouSheBiaoTiHei-2.ttf');
}

.my-font {
  font-family: 'myfont', sans-serif; /* 使用自定义字体 */
  font-size: 20px;
  letter-spacing: 1px;
}

.frame_box {
  padding: 8px 1rem;
  display: flex;
  flex-direction: column;
  background: linear-gradient(130.76deg, rgba(8, 31, 55, 0.5) 0%, rgba(18, 50, 81, 0.5) 100%);
  border: 1px solid rgba(39, 80, 121, 1);

  .head_box {
    position: relative;

    .bg_box {
      width: 100%;
      height: 50px;
      background: url('@/assets/images/subTitle.png') no-repeat;
      background-size: cover;
      padding-left: 47px;

      .my-font {
        text-shadow: 0 0 9px rgba(21, 154, 255, 1);
        font-size: 20px;
        font-weight: 300;
        line-height: 50px;
        color: white;
      }
    }

    .border {
      width: 100%;
      height: 5px;
      background: url('@/assets/images/titleBorder.png') no-repeat;
      background-size: cover;
      position: absolute;
      bottom: 0;
      right: 0;

      &:before {
        content: '';
        width: 52px;
        height: 1px;
        background-color: white;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }

  .content_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
</style>